<template>
  <el-card>
      <el-button type="primary" icon="el-icon-circle-plus-outline" @click="showFlag1.status=true">增加</el-button>
      <el-divider></el-divider>
      <GoodsTable @updateGoods="updateGoods" @changePage = "changePage" :page="page" :size="size" :goodsList="goodsList" :goodsCount="goodsCount"></GoodsTable>
      <GoodsMudel :showFlag1="showFlag1"></GoodsMudel>  
  </el-card>    
</template>

<script>
import GoodsTable from "./GoodTable"
import GoodsMudel from "./GoodsMudel"

import { mapState, mapActions } from 'vuex'
export default {
    data(){
        return {
            page: 1,
            size: 2,
            showFlag1: {
                status: false
            }
        }
    },
    components: {
        GoodsTable,
        GoodsMudel
    },
    computed:{
        ...mapState({goodsList: state=>state.goods.goodsList,goodsCount: state=>state.goods.goodsCount})
    },
    methods:{
        updateGoods(){
            this.goodsListActions(this.page,this.size)
            this.goodsCountActions()
        },
        changePage(page){
            this.page = page
            this.goodsListActions(page,this.size)
        },
        ...mapActions('goods',['goodsListActions','goodsCountActions'])
    },
    created(){
        this.goodsListActions()
        this.goodsCountActions()
    }
}
</script>

<style>

</style>